<script setup lang="ts">
// RouterLink 组件用于创建导航链接，可以传递一个 to 属性，该属性指定了链接的目标路径。
// RouterView 作为路由出口使用，RouterView渲染与当前url匹配的组件。例如，如果你有一个路由配置指向/home并映射到一个Home组件，那么当URL是/home时，RouterView就会渲染Home组件
// useRoute 函数返回一个包含当前路由信息的对象，可以获取当前路由的各种信息，比如路径path，查询参数query，路由参数params，路由名name等。
import { RouterLink, RouterView, useRoute } from 'vue-router'
import { routesList } from '@/router/index'
import { computed, ref } from 'vue';

// ElConfigProvider是一个全局配置提供者组件。它允许你在应用的顶层设置一些全局的配置。比如主题颜色、字体大小、组件尺寸等。
import { ElConfigProvider } from 'element-plus'
// 导入中文语言包
import zhCn from 'element-plus/es/locale/lang/zh-cn'

const routeList = ref<any>(routesList)

const route = useRoute()
console.log(route);

const elementUiAdminMenu = ['userManage', 'roleManage', 'studemo62']
const isRouteStudemo61 = computed(() => {
  return elementUiAdminMenu.includes(route.name as string)
})

</script>

<template>
  <header v-if="!isRouteStudemo61">
    <div class="wrapper">

      <nav>
        <!--   <RouterLink to="/">首页</RouterLink>
          <RouterLink to="/about">about</RouterLink>
        <RouterLink to="/studemo">选项式API</RouterLink>
        <RouterLink :to="{ path: '/studemo2' }">组合式API</RouterLink>
        <RouterLink :to="{ name: 'studemo3Name' }">组合式API-自定义渲染-返回h函数</RouterLink>
        <RouterLink to="/studemo4">组合式API-自定义渲染-JSX</RouterLink>
        <RouterLink to="/studemo5">setup 语法糖</RouterLink>
        <RouterLink to="/studemo6">setup 语法糖(ts)</RouterLink>

        <RouterLink to="/studemo21">模板语法-文本</RouterLink>
        <RouterLink to="/studemo22">模板语法-属性</RouterLink>
        <RouterLink to="/studemo23">内置指令</RouterLink>
        <RouterLink to="/studemo24">绑定 HTML class</RouterLink>
        <RouterLink to="/studemo25">绑定内联样式 Style</RouterLink>
        <RouterLink to="/studemo26">测试局部组件注册的部分</RouterLink>

        <RouterLink to="/studemo31">声明响应式状态</RouterLink>
        <RouterLink to="/studemo32">Reactive包装注意事项</RouterLink>
        <RouterLink to="/studemo33">Reactive() 的局限性</RouterLink>
        <RouterLink to="/studemo34">额外的 ref 解包细节</RouterLink>
        <RouterLink to="/studemo35">响应式 API: 工具函数</RouterLink>
        <RouterLink to="/studemo36">shallowReactive() & shallowReadonly()</RouterLink>
        <RouterLink to="/studemo37">shallowRef() & triggerRef()</RouterLink>
        <RouterLink to="/studemo38">toRaw() & unref() & markRaw()</RouterLink>
        <RouterLink to="/studemo39">customRef()</RouterLink>
        <RouterLink to="/studemo310">effectScope() & getCurrentScope() & onScopeDispose() 案例1</RouterLink>


        <RouterLink to="/studemo313">计算属性 </RouterLink>
        <RouterLink to="/studemo314">侦听器 watch() </RouterLink>
        <RouterLink to="/studemo315">侦听数据源的类型 </RouterLink>
        <RouterLink to="/studemo316">侦听器 watchEffect() </RouterLink>
        <RouterLink to="/studemo317">侦听器 副作用清理</RouterLink>


        <RouterLink to="/studemo41">组件的注册和引入</RouterLink>
        <RouterLink to="/studemo42">组件传值 props </RouterLink>
        <RouterLink to="/studemo43">组件事件 emit </RouterLink>
        <RouterLink to="/studemo44">插槽 Slots </RouterLink>
        <RouterLink to="/studemo45">插槽列表演示 </RouterLink>

        <RouterLink to="/studemo51"> fetch Api 获取资源的请求 </RouterLink>
        <RouterLink to="/studemo52"> axios Api 获取资源的请求 </RouterLink>
        <RouterLink to="/studemo53"> 获取用户信息的请求 </RouterLink>

        <RouterLink to="/example1"> onMounted() 应用场景案例 </RouterLink>
        <RouterLink to="/example2"> onUnmounted() 应用场景案例 </RouterLink>
        <RouterLink to="/example3"> onUpdated() 应用场景案例 </RouterLink>


        <RouterLink to="/studyDemo1">案例1-学生成绩管理系统 </RouterLink>
        <RouterLink to="/studyDemo2">案例2- 猪猪管理页面 </RouterLink>
        <RouterLink to="/studyDemo3">案例1-学生成绩管理系统2 </RouterLink>
        <RouterLink to="/studyDemo4">案例1-学生成绩管理系统3(访问模板引用ref&组件暴漏defineExpose()) </RouterLink>

        <RouterLink to="/test1"> test1-vue测试1-机试题 </RouterLink>
        <RouterLink to="/test2"> test2-vue测试1-笔试题 </RouterLink>
        <RouterLink to="/test3"> test3-商品列表 </RouterLink>

        <RouterLink to="/test21"> mytest21-vue测试2-第一题 </RouterLink>
        <RouterLink to="/test22"> mytest21-vue测试2-第二题 </RouterLink>
        <RouterLink to="/test23"> mytest21-vue测试2-第三题 </RouterLink>

        <RouterLink to="/studemo61"> element-plus </RouterLink> -->
        <!-- <RouterLink to="/studemo62"> element-plus 案例 </RouterLink> -->
        <!-- <RouterLink to="/login"> 登录页 </RouterLink> -->

      </nav>

      <!-- <hr> -->

      <!-- <nav>
        <RouterLink v-for="item in routeList" :key="item.name" :to="{ path: item.path }">{{
          item.title || item.name
          }}</RouterLink>
      </nav> -->

      <!--       <router-link to="/srdemo1">srdemo1路由</router-link>
      <router-link to="/srdemo1/detail1">srdemo1嵌套路由 detail1</router-link>

      <router-link :to="{
        //name:'xiang1', //用name也可以跳转
        path: '/srdemo1/detail1',    //  query 传参可以用 path 跳转 ，也可以用 name 传参
        query: {
          id: 1,
          title: '新闻标题',
          content: '内容'
        }
      }">
        query 传参
      </router-link>

      <router-link replace :to="{
        name: 'xiang2',      // params 传参 只能用 name 跳转
        params: {
          title: '新闻标题',
          content: '内容'
        }
      }">
        params 传参:replace
      </router-link>

      <router-link :to="{
        name: 'defaultp',
        params: {
          id: '10000'
        }
      }">
        default: params 传参
      </router-link> -->

    </div>
  </header>


  <!-- 使用ElConfigProvider的locale属性，你可以将整个应用的语言设置为中文 -->
  <!-- ElConfigProvider包裹了RouterView，这意味着所有通过路由加载的组件都会继承ElConfigProvider中设置的配置，包括语言设置。 -->
  <el-config-provider :locale="zhCn">
    <!-- 路由出口，渲染相对应的组件 -->
    <RouterView />
  </el-config-provider>

</template>

<style scoped lang="scss">
header {
  // border-bottom: 1px solid var(--color-border2);
  padding: 10px 0;
}

nav {
  width: 100%;
  font-size: 12px;
  text-align: center;

  a {
    display: inline-block;
    padding: 0 1rem;
    border-left: 1px solid var(--color-border);
    color: blue;
    margin: 5px 0;
  }
}
</style>
